<template>
	<view>
		<!-- 头部 -->
		<view class="menu_hd">
			<view class="hd_list">
				<uni-icons type="left" size="26" @tap="getPrev"></uni-icons>
				<input class="input_txt" type="text"  v-model="val" @confirm="funInput"/>
				<view class="sousuo" @tap="clickInput">
					搜索
				</view>
			</view>
			<!-- 历史记录 -->
			<view class="history">
				<view class="top_history">
					<view class="his_title">
						历史搜索
					</view>
					<uni-icons @tap="funDel" type="trash" size="26"></uni-icons>
				</view>
				<view class="content">
					<block v-for="item,index in historyList">
						<view class="con_item">
							{{item}}
						</view>
					</block>
				</view>
			</view>
			<!-- 热门搜索 -->
			<view class="history">
				<view class="top_history">
					<view class="his_title">
						热门搜索
					</view>
					<!-- <uni-icons type="trash" size="26"></uni-icons> -->
				</view>
				<view class="content">
					<block v-for="item,index in hotArr">
						<view class="con_item" :style="`color:${item.color};borderColor:${item.borderColor};`">
							{{item.title}}
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				// historyArr: ['几分', '广泛而', '葛根粉', '个人股', '会更好', '封闭热'],
				val:null,
				hotArr:[]
			};
		},
		computed:{
			...mapState(['historyList'])
		},
		methods: {
			...mapMutations(["saveHisList"]),
			getPrev() {
				this.$router.go(-1)
			},
			funDel(){			
				this.saveHisList([])
			},
			funInput(e){
				uni.navigateTo({
					url:`../searchDetail/searchDetail?value=${e.detail.value}`
				})
				// console.log(e.detail.value)
				if(this.historyList.indexOf(this.val) == -1){
					this.$store.dispatch('setHisList',this.val)
				}
			},
			clickInput(){
				
				if(this.historyList.indexOf(this.val) == -1){
					this.$store.dispatch('setHisList',this.val)
				}
				
				uni.navigateTo({
					url:`../searchDetail/searchDetail?value=${this.val}`
				})
			},
			getData() {
				this.$axios({
					methods: 'get',
					url: 'recipe/search/hot',
					// params:queryParam
				}).then(res => {
					this.hotArr = res.result.suggestdetails;
					this.val = res.result.suggestdetails[0].title
					console.log(res.result.suggestdetails[0].title)
				}).catch(err => {
					console.log(err)
				})
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.menu_hd {
		width: 100%;
		// border-bottom: 1rpx solid rgba(0, 0, 0, .2);
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99;
		// background: ;
		// border-color: ;

		.hd_list {
			width: 94%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			.input_txt {
				display: inline-block;
				width: 78%;
				font-size: 28rpx;
				background-color: #F5F5F5;
				padding: 16rpx 0;
				border-radius: 16rpx;
				text-indent: 40rpx;
				// font-weight: bold;
			}

			.sousuo {
				font-size: 28rpx;
			}
		}

	}

	//历史搜索
	.history {
		width: 100%;
		margin: 50rpx 0;

		.top_history {
			width: 90%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;

			.his_title {
				font-size: 34rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}
		}
		.content{
			width: 84%;
			margin:  0 auto;
			display: flex;
			flex-wrap: wrap;
			.con_item{
				margin: 14rpx 18rpx 14rpx 0;
				padding: 8rpx 22rpx;
				background-color: #FAFAFA;
				border-radius: 8rpx;
				// box-sizing: border-box;
				border: 2rpx solid #fff;
				font-size: 20rpx;
			}
		}
			
		
	}

	// 热门搜索
	.hot_search {
		width: 90%;
		margin: 0 auto;
		font-size: 34rpx;
		font-weight: bold;
	}
</style>
